<template>
  <div class="jnpf-content-wrapper jnpf-dynamicReport-wrapper" v-loading="pageLoading">
    <div class="tool-wrap">
      <a-tooltip title="打印">
        <a-button type="text" :disabled="pageLoading" class="action-bar-btn" @click="handlePrint">
          <i class="icon-ym icon-ym-printExample" />
        </a-button>
      </a-tooltip>
      <a-tooltip title="导出">
        <a-button type="text" :disabled="pageLoading" class="action-bar-btn" @click="handleDownload">
          <i class="icon-ym icon-ym-btn-export1" />
        </a-button>
      </a-tooltip>
    </div>
    <div class="query-wrap" v-if="searchSchemas?.length">
      <BasicForm @register="registerSearchForm" :schemas="searchSchemas" @submit="handleSearchSubmit" @reset="searchFormSubmit" class="search-form">
      </BasicForm>
    </div>
    <div class="content-main">
      <JnpfUniver ref="jnpfUniverRef" />
    </div>
  </div>
  <ReportPrint @register="registerReportPrint" />
</template>

<script lang="ts" setup>
  import { reactive, onMounted, onUnmounted, toRefs, ref, unref } from 'vue';
  import { useRoute } from 'vue-router';
  import { getPreviewTemplate, exportFileExcel } from '@/api/onlineDev/report';
  import { BasicForm, useForm } from '@/components/Form';
  import { JnpfUniver } from '@/components/Report/src/jnpfUniver';
  import { useReport } from '@/components/Report/src/hooks/useReport';
  import { ReportPrint } from '@/components/Report';
  import { downloadByUrlReport } from '@/utils/file/download';
  import { useModal } from '@/components/Modal';

  defineOptions({ name: 'dynamicReport' });

  interface State {
    id: string;
    reportData: any;
    pageLoading: boolean;
    jnpfUniverAPI: any;
  }

  const jnpfUniverRef = ref();
  const state = reactive<State>({
    id: '',
    reportData: {},
    pageLoading: false,
    jnpfUniverAPI: null,
  });
  const { pageLoading } = toRefs(state);

  const [registerReportPrint, { openModal: openPrintModal }] = useModal();
  const [registerSearchForm, { updateSchema, submit: searchFormSubmit, getFieldsValue }] = useForm({
    baseColProps: { span: 6 },
    showActionButtonGroup: true,
    showAdvancedButton: true,
    compact: true,
  });
  const formApi = { updateSchema, getFieldsValue };
  const { getRealEchart, getSearchSchema, searchSchemas } = useReport(formApi);

  // 初始化
  function init() {
    const route = useRoute();
    state.id = route?.meta?.relationId as string;
    if (!state.id) return;
    state.pageLoading = true;
    initData();
  }
  function initData(data = {}) {
    state.pageLoading = true;
    getPreviewTemplate(state.id, data).then(res => {
      state.reportData = res.data;
      const queryList = res.data.queryList ? JSON.parse(res.data.queryList) : [];
      const snapshot = res.data.snapshot ? JSON.parse(res.data.snapshot) : null;
      const cells = res.data.cells ? JSON.parse(res.data.cells) : {};
      const chartData = res.data.chartData ? JSON.parse(res.data.chartData) : [];
      const echarts = getRealEchart(cells.echarts ?? null, chartData);
      getSearchSchema(queryList);
      handleCreate(snapshot, echarts);
      state.pageLoading = false;
    });
  }
  // 创建报表实例
  function handleCreate(snapshot, echarts) {
    const res = unref(jnpfUniverRef)?.handleCreateDesignUnit({
      mode: 'preview',
      snapshot,
      echarts,
      uiHeader: false,
      uiContextMenu: false,
      workbookReadonly: true,
      loading: true,
    });
    state.jnpfUniverAPI = res ? res?.jnpfUniverAPI : null;
    onReportCommandExecuted();
  }
  function onReportCommandExecuted() {
    state.jnpfUniverAPI?.onCommandExecuted((command: any) => {
      const { id: commandId } = command ?? {};
      // 切换sheet
      if (commandId === 'sheet.operation.set-worksheet-active') {
      }
    });
  }
  // 销毁示例
  function handleDisposeUnit() {
    unref(jnpfUniverRef)?.handleDisposeUnit();
  }
  function handleSearchSubmit(data) {
    initData(data);
  }
  // 打印
  function handlePrint() {
    const { snapshot } = unref(jnpfUniverRef)?.getPreviewWorkbookData();
    const sheetId = state.jnpfUniverAPI.getActiveWorkbook()?.getActiveSheet()?.getSheetId();
    openPrintModal(true, { id: state.reportData.versionId, fullName: state.reportData.fullName, sheetId, snapshot });
  }
  // 导出
  function handleDownload() {
    const { snapshot } = unref(jnpfUniverRef)?.getPreviewWorkbookData();
    const sheetId = state.jnpfUniverAPI.getActiveWorkbook()?.getActiveSheet()?.getSheetId();
    const data = unref(searchSchemas).length ? getFieldsValue() : {};
    const query = { ...data, sheetId, fullName: state.reportData.fullName, snapshot: snapshot ? JSON.stringify(snapshot) : null };
    exportFileExcel(state.reportData.versionId, query).then(res => {
      downloadByUrlReport({ url: res.data.url });
    });
  }

  onMounted(() => {
    init();
  });

  onUnmounted(() => {
    handleDisposeUnit();
  });
</script>

<style lang="less">
  .jnpf-dynamicReport-wrapper {
    background-color: @component-background;
    display: flex;
    flex-direction: column;
    .tool-wrap {
      height: 53px;
      padding: 10px;
      border-bottom: 1px solid @border-color-base1;
    }
    .query-wrap {
      padding: 10px 10px 0;
      border-bottom: 1px solid #f0f0f0;
    }
    .content-main {
      flex: 1;
      overflow: hidden;
      position: relative;
    }
  }
</style>
